<template>
	<view class="home">
		<view class="home-fixed">
			<view class="nav_bar">
				<u-navbar title="智慧商城" bgColor="#c21401" leftIconSize="0px">
					<template slot="left"></template>
				</u-navbar>
			</view>
			<view class="home-search">
				<u-search
					disabled
					shape="round"
					:clearabled="false"
					placeholder="请在此输入搜索关键字"
					:showAction="false"
					@click="handleSearchClick"></u-search>
			</view>
		</view>
		<view class="home-content">
			<view class="home-swiper">
				<swiper
					class="swiper"
					circular
					:indicator-dots="true"
					indicator-color="rgba(255, 255, 255, .5)"
					indicator-active-color="#fff"
					:autoplay="true"
					:circular="true">
					<swiper-item
						v-for="item in bannerList"
						:key="item.link.id">
						<navigator>
							<image :src="item.imgUrl" mode="widthFix"></image>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="home-gard">
				<u-grid
					col="5"
					border
					@click="click">
					<u-grid-item
						v-for="(item,index) in navList"
						:key="index">
						<u--image :src="item.imgUrl" mode="widthFix"></u--image>
						<text class="grid-text">{{ item.text }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="home-main">
				<image src="@/static/photos/main.png" mode="widthFix"></image>
			</view>
			<view class="home-goods">
				<view class="goods-title">—— 猜你喜欢 ——</view>
				<GoodsItem
					v-for="item in proList"
					:key="item.goods_id"
					:item="item" />
			</view>
		</view>
	</view>
</template>

<script>
	import { getHomeData } from '@/api/home'
	import GoodsItem from '@/components/GoodsItem'

	export default {
		name: 'homeIndex',
		data () {
			return {
				placeholder: '',
				bannerList: [],
				navList: [],
				proList: []
			}
		},
		components: {
			GoodsItem
		},
		onLoad () {
			this.loadHomeData()
		},
		methods: {
			// 加载首页中的数据
			async loadHomeData () {
				const { pageData: { items } } = await getHomeData()
				this.bannerList = items[1].data
				this.navList = items[3].data
				this.proList = items[6].data
			},
			// 点击搜索按钮
			handleSearchClick () {
				uni.navigateTo({
					url: '/subpkg/search/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.home {
	width: 750rpx;
	height: 100vh;
	paddng-top: 400rpx;
	box-sizing: border-box;
	.home-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		height: 300rpx!importamt;
		background-color: #f1f1f2;
		.nav_bar {
			height: 88rpx!important;
			/deep/ .u-navbar {
				height: 88rpx!important;
				.u-navbar__content {
					.u-navbar__content__title {
						font-size: 30rpx!important;
						color: #fff!important;
					}
				}
			}
		}
		.home-search {
			margin-top: 56px;
			height: 108rpx;
			/deep/ .u-search {
				margin: 20rpx auto!important;
				.u-search__content {
					background-color: #f7f8fa!important;
					// background-color: #ff6700!important;
					margin: 0rpx 20rpx!important;
					height: 88rpx!important;
					.u-search__content__input {
						background-color: #f7f8fa!important;
					}
				}
			}
		}
	}
	.home-content {
		margin-top: 300rpx;
		.home-swiper {
			.swiper {
				width: 750rpx;
				height: 370rpx!important;
				image {
					width: 750rpx!important;
					height: 370rpx!important;
				}
			}
		}
		.home-gard {
			/deep/ .u-grid {
				background-color: #fff;
				.u-grid-item {
					padding: 10rpx 0rpx!important;
					.u-transition {
						.u-image {
							width: 80rpx!important;
							height: 80rpx!important;
							.u-image__image {
								width: 80rpx!important;
							}
						}
					}
					.grid-text {
						font-size: 24rpx!important;
						color: #646566;
						margin-top: 10rpx;
					}
				}
			}
		}
		.home-main {
			width: 750rpx;
			image {
				width: 750rpx;
			}
		}
		.home-goods {
			.goods-title {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
}
</style>
